<template>
  <div>
    <div style="margin: 10px 0">
      <el-input
        v-model="searchMovie"
        placeholder="请输入电影名"
        clearable
        style="width: 20%"
      />
      <el-button type="primary" style="margin-left: 10px" @click="findAllHot"
        >查询</el-button
      >
    </div>
    <p style="font-weight: bold">热门电影如下,播放请点击电影名称</p>

    <div>
      <!-- 开始卡片 -->
      <div class="Search">
        <div v-for="item in movieList" :key="item.id">
          <div class="Search-tiem">
            <div style="display: flex">
              <img
                style="width: 160px; height: 120px"
                :src="item.img"
                class="image"
              />
              <div style="padding: 14px" @click="jumpPlayer(item.id)">
                <p style="font-size: 25px; font-weight: bold">
                  {{ item.name }}
                </p>
                <span style="font-size: 18px">
                  评分: <a href="#" style="color: red">{{ item.level }}</a>
                </span>
              </div>
            </div>
            <div style="align-items: center; margin-left: 15px">
              <p
                style="
                  font-size: 22px;
                  color: #949494;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ item.memo }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页开始 -->
      <div style="margin: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:currentPage="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 分页结束 -->
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  name: "PageHot",
  components: {},
  data() {
    return {
      //定义movieList数组
      searchMovie: "",
      movieList: [],
      pageNum: 1,
      pageSize: 10, //默认为10
      currentPage: 1, //默认是1r
      total: 0,
      name: null,
      hotId: 1,
    };
  },
  created() {
    this.findAllHot();
  },
  mounted() {},
  methods: {
    findAllHot() {
      // 查询所有热门电影
      console.log(this.searchMovie);
      request
        .get("/hot/findHotMovie", {
          params: {
            //传入变量
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            name: this.searchMovie,
            hotId: this.hotId,
          },
        })
        .then((res) => {
          console.log(res);
          //重点 将查询到的数据records 返回给表单中的HotData
          (this.movieList = res.data.list), (this.total = res.data.total);
        });
    },
    //跳转播放界面
    jumpPlayer(id) {
      console.log("传出去的id: " + id);
      this.$router.push({ path: "/player", query: { id } });
    },

    //改变条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.findAll();
    },

    //改变当前页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.findAll();
    },
  },
};
</script>

<style>
.Search {
  display: flex;
  flex-direction: column;
}
.Search-tiem {
  padding: 15px;
  margin-top: 20px;
  flex-direction: row;
  display: flex;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>